<!DOCTYPE html>
<html>

<head>
    <title>{$Think.config.app_name}</title>
    {include file="public/head"/}
    <style>

    </style>
</head>

<body class="layui-layout-body">
    <div id="LAY_app" class="layadmin-tabspage-none">
        <div class="layui-layout layui-layout-admin">
            {include file="public/menu"/}
            <!-- 主体内容 -->
            <div class="layui-body root_box" v-cloak>
                <div class="layui-form layui-border-box">
                    <div class="layui-table-tool">
                        <div class="layui-form">
                            <div class="layui-input-inline">
                                <button @click="item_add" type="button" class="layui-btn layui-btn-sm"><i
                                        class="iconfont icon-tianjia"></i>添加</button></span>
                            </div>
                            <div class="layui-input-inline">
                                <select lay-ignore class="layui-input layui-input-sm" name="node_module"
                                    v-model="search" style="width:120px;">
                                    <option value="">请选择筛选器</option>
                                    <option value="group_name">用户组名称</option>
                                </select>
                            </div>
                            <div class="layui-input-inline">
                                <input type="text" v-model="keyword" class="layui-input layui-input-search"
                                    placeholder="输入关键词搜索" />
                            </div>
                            <div class="layui-input-inline">
                                <button type="button" class="layui-btn layui-btn-primary layui-btn-sm"
                                    @click="getList"><i class="iconfont icon-search"></i>搜索</button></span>
                            </div>
                        </div>
                    </div>
                    <div class="layui-table-box">
                        <div class="layui-table-body layui-table-main">
                            <table cellspacing="0" cellpadding="0" border="0" class="layui-table" width="100%">
                                <thead>
                                    <tr>
                                        <th class="layui-table-col-special">
                                            <div class="layui-table-cell" v-show="isSelectedAll">
                                                <div lay-skin="primary"
                                                    class="layui-unselect layui-form-checkbox layui-form-checked"
                                                    onclick="selectALL()"><i class="layui-icon layui-icon-ok"></i></div>
                                            </div>
                                            <div class="layui-table-cell" v-show="!isSelectedAll">
                                                <div lay-skin="primary" class="layui-unselect layui-form-checkbox"
                                                    onclick="selectALL()"><i class="layui-icon layui-icon-ok"></i></div>
                                            </div>
                                        </th>
                                        <th>
                                            <div class="layui-table-cell">
                                                <span>ID</span>
                                                <span v-show="order[0]=='group_id' && order[1]=='asc'">
                                                    <span class="layui-table-sort layui-inline">
                                                        <i class="layui-edge layui-table-sort-asc" title="升序"
                                                            skey="group_id" @click="sort"
                                                            style="border-bottom-color:#333;"></i>
                                                        <i class="layui-edge layui-table-sort-desc" title="降序"
                                                            skey="group_id" @click="sort"></i>
                                                    </span>
                                                </span>
                                                <span v-show="order[0]=='group_id' && order[1]=='desc'">
                                                    <span class="layui-table-sort layui-inline">
                                                        <i class="layui-edge layui-table-sort-asc" title="升序"
                                                            skey="group_id" @click="sort"></i>
                                                        <i class="layui-edge layui-table-sort-desc" title="降序"
                                                            skey="group_id" @click="sort"
                                                            style="border-top-color:#333;"></i>
                                                    </span>
                                                </span>
                                                <span v-show="order[0]!='group_id'">
                                                    <span class="layui-table-sort layui-inline">
                                                        <i class="layui-edge layui-table-sort-asc" title="升序"
                                                            skey="group_id" @click="sort"></i>
                                                        <i class="layui-edge layui-table-sort-desc" title="降序"
                                                            skey="group_id" @click="sort"></i>
                                                    </span>
                                                </span>
                                            </div>
                                        </th>
                                        <th>
                                            <div class="layui-table-cell "><span>用户组</span>
                                            </div>
                                        </th>
                                        <th>
                                            <div class="layui-table-cell"><span>系统组</span>
                                            </div>
                                        </th>
                                        <th>
                                            <div class="layui-table-cell"><span>修改时间</span>
                                                <span v-show="order[0]=='group_updatetime' && order[1]=='asc'">
                                                    <span class="layui-table-sort layui-inline">
                                                        <i class="layui-edge layui-table-sort-asc" title="升序"
                                                            skey="group_updatetime" @click="sort"
                                                            style="border-bottom-color:#333;"></i>
                                                        <i class="layui-edge layui-table-sort-desc" title="降序"
                                                            skey="group_updatetime" @click="sort"></i>
                                                    </span>
                                                </span>
                                                <span v-show="order[0]=='group_updatetime' && order[1]=='desc'">
                                                    <span class="layui-table-sort layui-inline">
                                                        <i class="layui-edge layui-table-sort-asc" title="升序"
                                                            skey="group_updatetime" @click="sort"></i>
                                                        <i class="layui-edge layui-table-sort-desc" title="降序"
                                                            skey="group_updatetime" @click="sort"
                                                            style="border-top-color:#333;"></i>
                                                    </span>
                                                </span>
                                                <span v-show="order[0]!='group_updatetime'">
                                                    <span class="layui-table-sort layui-inline">
                                                        <i class="layui-edge layui-table-sort-asc" title="升序"
                                                            skey="group_updatetime" @click="sort"></i>
                                                        <i class="layui-edge layui-table-sort-desc" title="降序"
                                                            skey="group_updatetime" @click="sort"></i>
                                                    </span>
                                                </span>
                                            </div>
                                        </th>
                                        <th>
                                            <div class="layui-table-cell"><span>操作</span>
                                            </div>
                                        </th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-show="list.length==0">
                                        <td class="nodata" colspan="12">{{nomoredata}}</td>
                                    </tr>
                                    <tr v-show="list.length>0" v-for="(item, index) in list" :key="index">
                                        <td class="layui-table-col-special">
                                            <div class="layui-table-cell" v-show="isSelected(item.group_id)">
                                                <div lay-skin="primary"
                                                    class="layui-unselect layui-form-checkbox layui-form-checked"
                                                    onclick="select(this)" :index="index" :primary_key="item.group_id">
                                                    <i class="layui-icon layui-icon-ok"></i></div>
                                            </div>
                                            <div class="layui-table-cell" v-show="!isSelected(item.group_id)">
                                                <div lay-skin="primary" class="layui-unselect layui-form-checkbox"
                                                    onclick="select(this)" :index="index" :primary_key="item.group_id">
                                                    <i class="layui-icon layui-icon-ok"></i></div>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="layui-table-cell">{{item.group_id}}</div>
                                        </td>
                                        <td>
                                            <div class="layui-table-cell">{{item.group_name}} <i
                                                    :onclick="['layer.tips(document.getElementById(\'hidden_'+item.group_id+'\').innerHTML, this, {tips: 3});']"
                                                    style="color:#ccc;cursor:pointer;" class="iconfont icon-info-circle"
                                                    :title="item.group_desc"></i>
                                                <div :id="['hidden_'+item.group_id]" class="hidden">{{item.group_desc}}
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="layui-table-cell">
                                                <font color=#ccc v-show="item.group_system==1">系统组</font>
                                                <font v-show="item.group_system==0">普通组</font>
                                        </td>
                                        <td>
                                            <div class="layui-table-cell">{{time2string(item.group_updatetime)}}</div>
                                        </td>
                                        <td class="layui-table-col-special">
                                            <div class="layui-table-cell">
                                                <a @click="item_auth" :itemid="item.group_id"
                                                    class="layui-btn layui-btn-primary  layui-btn-xs iconfont icon-manage"
                                                    title="权限设置"></a>
                                                <font color=#ccc v-show="item.group_status==1">
                                                    <a @click="item_enable" :itemid="item.group_id"
                                                        class="layui-btn layui-btn-danger layui-btn-xs iconfont icon-guanbi3"
                                                        title="启用"></a>
                                                </font>
                                                <font v-show="item.group_status==0">
                                                    <a @click="item_disable" :itemid="item.group_id"
                                                        class="layui-btn layui-btn-primary  layui-btn-xs iconfont icon-duihao"
                                                        title="禁用"></a>
                                                </font>
                                                <a @click="item_edit" :itemid="item.group_id"
                                                    class="layui-btn layui-btn-primary  layui-btn-xs iconfont icon-edit"
                                                    title="编辑"></a>
                                                <a @click="item_delete" :itemid="item.group_id"
                                                    class="layui-btn layui-btn-primary layui-btn-xs iconfont icon-empty"
                                                    title="删除"></a>
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="layui-table-page">
                        <div v-show="isSelectedAll" lay-skin="primary" style="padding:0"
                            class="layui-unselect layui-form-checkbox layui-form-checked" onclick="selectALL()"><i
                                class="layui-icon layui-icon-ok"></i></div>
                        <div v-show="!isSelectedAll" lay-skin="primary" style="padding:0"
                            class="layui-unselect layui-form-checkbox" onclick="selectALL()"><i
                                class="layui-icon layui-icon-ok"></i></div>
                        <a @click="item_enable_all" class="layui-btn layui-btn-primary layui-btn-xs" title="启用选中项"><i
                                class="iconfont icon-duihao"></i>启用</a>
                        <a @click="item_disable_all" class="layui-btn layui-btn-primary layui-btn-xs" title="禁用选中项"><i
                                class="iconfont icon-guanbi3"></i>禁用</a>
                        <a @click="item_delete_all" class="layui-btn layui-btn-primary layui-btn-xs" title="删除选中项"><i
                                class="iconfont icon-empty"></i>删除</a>
                        {include file="public/paginate"/}
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
{include file="public/foot"/}
<script>
    var app = new Vue({
        el: ".root_box",
        data: {
            list: [],
            nomoredata: "数据加载中",
            current_page: 1,
            total_page: 1,
            per_page: 20,
            total: 0,
            search: "",
            keyword: '',
            order: [
                "group_id",
                "desc"
            ],
            selectList: [],
            isSelectedAll: false
            //上面的参数不允许删除
        },
        created: function () {
            this.getList();
        },
        methods: {
            isSelected: function (group_id) {
                return this.selectList.indexOf(group_id) >= 0 ? true : false;
            },
            time2string: function (timestamps) {
                return new Date(parseInt(timestamps) * 1000).Format("MM-dd hh:mm");
            },
            sort: function (e) {
                this.order[0] = e.target.attributes.skey.value;
                this.order[1] = e.target.attributes.title.value == "升序" ? 'asc' : 'desc';
                this.getList();
            },
            prev: function () {
                this.current_page--;
                this.getList();
            },
            next: function () {
                this.current_page++;
                this.getList();
            },
            getList: function () {
                this.isSelectedAll = false;
                this.selectList = [];
                _loading();
                $.post("/api/group/lists", Object.assign({
                    per_page: this.per_page,
                    page: this.current_page,
                    search: this.search,
                    keyword: this.keyword,
                    order: this.order[0] + " " + this.order[1]
                }, PostCommon),
                    function (data, status) {
                        _hideLoading();
                        if (data.code != 200) {
                            if (data.url) {
                                location.replace(data.url);
                            }
                            _alert(data.msg);
                            app.nomoredata = data.msg;
                        } else {
                            if (data.data.data.length == 0) {
                                app.nomoredata = "没有更多数据了";
                            }
                            app.list = data.data.data;
                            app.current_page = data.data.current_page;
                            app.total_page = data.data.total % data.data.per_page == 0 ? parseInt(data.data.total / data.data.per_page) : parseInt(data.data.total / data.data.per_page) + 1;
                            app.total = data.data.total;
                        }
                    });
            },
            item_auth: function (e) {
                var item_id = e.target.attributes.itemid.value;
                openFrame("/admin/group/authorize?group_id=" + item_id, '修改用户组权限', 900, 600);
            },
            item_edit: function (e) {
                var item_id = e.target.attributes.itemid.value;
                openFrame("/admin/group/update?group_id=" + item_id, '修改用户组信息', 500, 310);
            },
            item_add: function (e) {
                openFrame("/admin/group/add", '添加用户组信息', 500, 310);
            },
            item_enable: function (e) {
                var item_id = e.target.attributes.itemid.value;
                var that = this;
                _confirm('是否确认启用这个用户组?', '启用提醒', function () {
                    _loading("正在启用");
                    $.post("/api/group/enable", Object.assign({
                        group_id: item_id,
                    }, PostCommon),
                        function (data, status) {
                            _hideLoading();
                            if (data.code != 200) {
                                if (data.url) {
                                    location.replace(data.url);
                                }
                                _alert(data.msg);
                            } else {
                                that.getList();
                            }
                        });
                });
            },
            item_disable: function (e) {
                var item_id = e.target.attributes.itemid.value;
                var that = this;
                _confirm('是否确认禁用这个用户组?', '禁用提醒', function () {
                    _loading("正在禁用");
                    $.post("/api/group/disable", Object.assign({
                        group_id: item_id,
                    }, PostCommon),
                        function (data, status) {
                            _hideLoading();
                            if (data.code != 200) {
                                if (data.url) {
                                    location.replace(data.url);
                                }
                                _alert(data.msg);
                            } else {
                                that.getList();
                            }
                        });
                });
            },
            item_delete: function (e) {
                var item_id = e.target.attributes.itemid.value;
                var that = this;
                _confirm('是否确认删除这个用户组?', '删除提醒', function () {
                    _loading("正在删除");
                    $.post("/api/group/delete", Object.assign({
                        group_id: item_id,
                    }, PostCommon),
                        function (data, status) {
                            _hideLoading();
                            if (data.code != 200) {
                                if (data.url) {
                                    location.replace(data.url);
                                }
                                _alert(data.msg);
                            } else {
                                that.getList();
                            }
                        });
                });
            },
            item_delete_all: function () {
                var that = this;
                _confirm('是否确认批量删除选择的用户组?', '批量删除提醒', function () {
                    _loading("正在批量删除");
                    $.post("/api/group/delete", Object.assign({
                        group_id: app.selectList.join(","),
                    }, PostCommon),
                        function (data, status) {
                            _hideLoading();
                            if (data.code != 200) {
                                if (data.url) {
                                    location.replace(data.url);
                                }
                                _alert(data.msg);
                            } else {
                                that.getList();
                            }
                        });
                });
            },
            item_enable_all: function () {
                var that = this;
                _confirm('是否确认批量启用选择的用户组?', '批量启用提醒', function () {
                    _loading("正在批量启用");
                    $.post("/api/group/enable", Object.assign({
                        group_id: app.selectList.join(","),
                    }, PostCommon),
                        function (data, status) {
                            _hideLoading();
                            if (data.code != 200) {
                                if (data.url) {
                                    location.replace(data.url);
                                }
                                _alert(data.msg);
                            } else {
                                that.getList();
                            }
                        });
                });
            },
            item_disable_all: function () {
                var that = this;
                _confirm('是否确认批量禁用选择的用户组?', '批量禁用提醒', function () {
                    _loading("正在批量禁用");
                    $.post("/api/group/disable", Object.assign({
                        group_id: app.selectList.join(","),
                    }, PostCommon),
                        function (data, status) {
                            _hideLoading();
                            if (data.code != 200) {
                                if (data.url) {
                                    location.replace(data.url);
                                }
                                _alert(data.msg);
                            } else {
                                that.getList();
                            }
                        });
                });
            },
        }
    });

    function select(primary_key) {
        var primary_key = parseInt($(primary_key).attr('primary_key'));
        console.log(primary_key);
        if (app.selectList.indexOf(primary_key) >= 0) {
            app.selectList.splice(app.selectList.indexOf(primary_key), 1);
        } else {
            app.selectList.push(primary_key);
        }
        console.log(JSON.parse(JSON.stringify(app.selectList)));
    }

    function selectALL() {
        app.selectList = [];
        if (!app.isSelectedAll) {
            app.list.forEach(function (value, index) {
                app.selectList.push(value.group_id);
            });
        }
        app.isSelectedAll = !app.isSelectedAll;
    }
</script>

</html>